<template>
  <div>
    <d2-container full>
      <div v-infinite-scroll="load" infinite-scroll-immediate="false" infinite-scroll-delay="200">
        <el-card
          class="box-card"
          shadow="hover"
          v-for="(item, index) in data"
          :key="index"
          style="overflow: auto"
        >
          <el-descriptions
            class="margin-top"
            :title="item.id"
            :column="3"
            border
          >
            <template slot="extra">
              <el-button type="primary" size="small" @click="getdata(index)"
                >审核</el-button
              >
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                申述人
              </template>
              {{ item.username }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                申诉时间
              </template>
              {{ item.time }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                违规车牌
              </template>
              {{ item.violation.carId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                违规时间
              </template>
              {{ item.violation.time }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                违规说明
              </template>
              {{ item.violation.illustrate }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <el-dialog
     top='5vh'
        id="dialog"
        title="审核操作"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <el-descriptions direction="vertical" :column="4" border>
          <el-descriptions-item label="申诉人">{{
            dialogdata.username
          }}</el-descriptions-item>
          <el-descriptions-item label="申诉时间">{{
            dialogdata.time
          }}</el-descriptions-item>
          <el-descriptions-item label="违规车牌" :span="2">{{
            dialogdataram.carId
          }}</el-descriptions-item>
          <el-descriptions-item label="违规时间">
            {{ dialogdata.time }}
          </el-descriptions-item>
          <el-descriptions-item label="违规说明">{{
             dialogdataram.illustrate
          }}</el-descriptions-item>
            <el-descriptions-item label="申诉理由">{{
             dialogdata.reason
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="image">
          <img
            src="https://images.unsplash.com/photo-1647757698830-c766707b4bb7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
            alt="图片无法显示"
          />
        </div>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">拒绝</el-button>
          <el-button type="primary" @click="transit(dialogdata.violation_id)">通过</el-button>
        </span>
      </el-dialog>
    </d2-container>
  </div>
</template>

<script>
export default {
  name: 'audit',
  data() {
    return {
      // 无线滚动
      loading: false,
      // 页数
      index: 1,
      dialogVisible: false, // 弹出层控制
      // 后端数据
      data: [],
      dialogdata: [],
      dialogdataram: []
    }
  },
  created() {
    this.getrealitydata()
  },
  methods: {
    // 获取后端数据
    async getrealitydata() {
       const page = {
 page: this.index,
          amount: 4
}
      await this.axios
        .post('/api/violation/findNotProcessed', page)
        .then((ret) => {
const datas = ret.data.records
datas.forEach(data => {
data.id += ''
})
if (this.index === 1) {
            this.data = datas
          } else {
            this.data.push(...datas)
          }
          // console.log(this.data)
this.index++
        })
        .catch((res) => {
          console.log(res)
        })
    },
    // X号弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 审核弹出层数据
    getdata(index) {
      this.dialogdata = this.data[index]
      this.dialogdataram = this.dialogdata.violation
      this.dialogVisible = true
      // console.log(this.dialogdata)
    },
    // 通过 审核
              async transit(id) {
                console.log(id)
     const token = this.$store.state.d2admin.user.token
     console.log(token)
     const audit = { id: id,accept: true }
const res = fetch('/api/violation/handle',{
  method: 'POST',
  headers: {
    Authorization: `Bearer${token}`,
     'Content-Type': 'application/json'
  },
body: JSON.stringify(audit)
}).then(jsop => jsop.json()
).then(data => {
  console.log(data)
  switch (data.code) {
        case 200:
            this.$message.success(data.message)
            this.getrealitydata()

            break
        case 500:
            this.$message.error({
                content: data.message
            })

            break
    }
})
      this.dialogVisible = false
    },
    load() {
      this.getrealitydata()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  width: 1000px;
  height: 200px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  margin: 20px auto;
}

#dialog {
    .el-dialog{
    margin: 0 auto;
}
  .image {
    height: 400px;
    width: 80%px;
    margin: 10px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dialog-footer {
    width: 200px;
    display: block;
    margin: 10px auto;
  }
}
</style>>
